<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--v-bind动态绑定标签的属性值v-bind:属性名="属性值"，简化：:属性名="属性值"
        标签中属性的值发生变化，data中的数据是不会发生变化的。而data中的数据变化，标签中的属性值会发生变化
        -->
        <a href="{{url}}">跳转至(错误写法，插值表达式不能用于属性值)：{{url}}</a>
        <br>
        <a v-bind:href="url">跳转至(写法2)：{{url}}</a>
        <br>
        <a :href="url">跳转(简化写法)：{{url}}</a>
        <br>
        <button @click="alterA">点我修改data</button>
        <button @click="alterHref">点我修改a标签的href并输出data</button>
    </div>
   
</body>
<script type="module">
    //导入vue模块
    import {createApp} from '../vue.esm-browser.js'
    //创建应用实例
    createApp({
        data(){
            return {
               url:"https://www.bilibili.com"
            }
        },
        methods: {
             alterA:function(){
                this.url="#"
                const a=document.querySelectorAll('a')
                for(let i=1;i<a.length;i++)//不输出错误写法
                {
                   console.log(a[i].getAttribute("href"))//修改后的href="#"
                }
            },
            alterHref:function(){
                const a=document.querySelectorAll('a')
                for(let i=0;i<a.length;i++)
                {
                    a[i].setAttribute('href','#')
                }
                console.log(this.url)//data仍为b站
            }

        }
    }).mount('#app')//控制页面元素
</script>
</html>